<template>
	<view class="container">
		<view class="success-box">
			<image class="success-img" :src="image_hosts + 'img_succeed.png'"></image>
			<view v-if="allData.delivery == 1" class="success-text-box">
				<view class="success-text">支付成功</view>
				<view class="success-price">支付金额：￥{{allData.salePrice}}</view>
			</view>
			<view v-else class="success-text">下单成功</view>
			<view class="line-box-h">
				<view class="line-box-top">
				</view>
			</view>
		</view>
		<!-- 商品列表开始 -->
		<view class="group-box">
			<view class="order-no-text">支付订单号：{{orderNo}}</view>
			<view class="bottom-line-box"><view class="bottom-line"></view></view>
			<!-- 中间开始 -->
			<view v-for="(item,index) in list" class="group-center">
				<view class="group-center-img">
					<image class="center-img" :src="item.goodsImg"></image>
				</view>
				<view class="center-text" style="width: 514rpx;">
					<view class="center-goods-name">{{item.goodsName}}</view>
					<view class="center-button-box">
						<view class="center-num">单位：{{item.goodsUnit}}</view>
						<view class="center-money">
							<text class="center-num">单价：</text>
							<text>￥ {{item.saleUnitPrice}}</text>
						</view>
					</view>
					<view class="center-button-box">
						<view class="num-text">×{{item.goodsNumber}}</view>
					</view>
				</view>
			</view>
			<!-- 中间结束 -->
		</view>
		<!-- 商品列表结束 -->
		<view v-if="allData.delivery == 1" class="success-tip-text">
			<view class="mail-price">
				<view class="mail-price-title">商品总价：</view>
				<view class="mail-price-text">￥{{allData.salePrice || 0}}</view>
			</view>
			<view class="bottom-line-box"><view class="bottom-line"></view></view>
			<view class="mail-price">
				<view class="mail-price-title">订单创建时间：</view>
				<view class="mail-num-text">{{allData.createTime || '-'}}</view>
			</view>
			<view class="bottom-line-box"><view class="bottom-line"></view></view>
			<view class="mail-price">
				<view class="mail-price-title">订单支付时间：</view>
				<view class="mail-num-text">{{allData.payTime || '-'}}</view>
			</view>
			<view class="bottom-line-box"><view class="bottom-line"></view></view>
			<view class="mail-price">
				<view class="mail-price-title">交易单号：</view>
				<view class="mail-num-text-2">{{allData.paymentNo || ''}}</view>
			</view>
			<view class="bottom-line-box"><view class="bottom-line"></view></view>
			<view class="mail-price">
				<view class="mail-price-title">ERP订单号：</view>
				<view class="mail-num-text-2">{{allData.erpOrderNo || ''}}</view>
			</view>
		</view>
		<!-- <view v-else class="n-tip-box">
			<view class="n-tip-text">下单成功后，需联系店长付款。如需配送还需将配送地址告知店长。</view>
		</view> -->
		<view style="width: 100%;height: 200rpx;"></view>
		<!-- 底部按钮 -->
		<!-- <view @click="toOrder" class="bottom-button-box">
			<view class="bottom-button">查看订单</view>
		</view> -->
		<!-- 底部按钮 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				image_hosts: this.image_host + 'mall/',
				allData: '', // 全部订单数据
				isLoad: false,
				list:[],
				total:0,
				orderNo:'',
				postData:{
					name:'',
					tel:'',
					region:'',
					page:1,
					pageSize:20
				},
				region: []
			}
		},
		onLoad(option) {
			this.list = []
			this.postData.page = 1
			if(option.orderNo){
				this.orderNo = option.orderNo
			}else{
				uni.showToast({title:'参数错误',icon:"none",duration:2000})
				return
			}
			this.getOrderInfo()
		},
		methods: {
			// 获取订单详情
			async getOrderInfo() {
			  let postData = {}
			  let res = await this.$javaCircle.doRequest("post", "vs/mall/getOrderInfo?mallOrderNo="+this.orderNo, {}, '', true)
			  if (res.data.code === 0) {
				this.list = res.data.data.ordersGoodsList
			    this.allData = res.data.data.mallOrders
			  }
			},
			// 跳转到详情
			toOrder(){
				uni.navigateTo({
				    url: '/pages/userMy/order/index?type=0'
				});
			},
		}
	}
</script>

<style scoped>
	.container {
		font-size: 30rpx;
		background: #F3F5F8;
	}
	.success-img{
		margin-top: -60rpx;
		width: 172rpx;
		height: 172rpx;
	}
	.order-no-text{
		background-color: #ffffff;
		font-size: 36rpx;
		height: 100rpx;
		line-height: 100rpx;
	}
	/* 列表模块开始 */
	.group-box{
		margin: -90rpx 20rpx 0 20rpx;
		padding: 20rpx;
		background-color: #ffffff;
		border-radius: 12rpx;
	}
	/* 中间开始 */
	.group-center{
		display: flex;
		justify-content: flex-start;
		margin-top: 20rpx;
	}
	.group-center-img{
		display: flex;
		justify-content: flex-start;
	}
	.center-img{
		width: 136rpx;
		height: 136rpx;
		margin-right: 20rpx;
	}
	.center-text{
		color: #333333;
		font-size: 32rpx;
		height: 136rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.center-button-box{
		display: flex;
		justify-content: space-between;
	}
	.center-num{
		font-size: 30rpx;
		color: #666666;
	}
	.center-money{
		color: #FF7E3E;
	}
	.center-goods-name{
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		overflow: hidden; //超出的文本隐藏	
		text-overflow: ellipsis; //溢出用省略号显示	
		display: -webkit-box;	
		-webkit-line-clamp: 2; // 超出多少行		
		-webkit-box-orient: vertical;
	}
	/* 中间结束 */
	/* 列表模块结束 */
	.bottom-button-box{
		position: fixed;
		bottom: 0;
		width: 750rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		margin-bottom: 30rpx;
	}
	.bottom-button{
		width: 640rpx;
		height: 96rpx;
		line-height: 96rpx;
		background: #5CAE77;
		border-radius: 27px;
		color: #ffffff;
		font-size: 34rpx;
	}
	.success-box{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 750rpx;
		height: 442rpx;
		background: #5CAE77;
		border-radius: 0 0 70rpx 70rpx;
	}
	.success-text-box{
		font-size: 42rpx;
		color: #FFFFFF;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.success-text{
		font-size: 34rpx;
		color: #ffffff;
		margin-top: 20rpx;
	}
	.success-price{
		
	}
	.success-tip-text{
		margin: 20rpx;
		padding: 20rpx;
		font-size: 32rpx;
		line-height: 50rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
	}
	.bottom-line-box{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.bottom-line{
		width: 654rpx;
		height: 1rpx;
		background: #F1F1F1;
	}
	.line-img{
		width: 706rpx;
		height: 10rpx;
		position: absolute;
		top: 20rpx;
		z-index: 10;
	}
	.line-box-top{
		width: 726rpx;
		height: 18rpx;
		background: #016020;
		border-radius: 17rpx;
		border: 1rpx solid #016020;
		opacity:0.6;
	}
	.line-box-h{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 750rpx;
		z-index: 3;
		margin-top: 30rpx;
		position: relative;
	}
	.mail-price{
		display: flex;
		justify-content: space-between;
		background-color: #ffffff;
		height: 114rpx;
		line-height: 114rpx;
	}
	.mail-price-title{
		font-size: 36rpx;
		color: #666666;
	}
	.mail-price-text{
		font-size: 40rpx;
		color: #FD4400;
		font-weight: bold;
	}
	.mail-num-text{
		font-size: 36rpx;
		color: #333333;
	}
	.mail-num-text-2{
		font-size: 32rpx;
		color: #333333;
	}
	.n-tip-box{
		background-color: #ffffff;
		margin: 20rpx;
		padding: 20rpx;
	}
	.n-tip-text{
		line-height: 50rpx;
	}
	.num-text{
		width: 100%;
		text-align: right;
		font-size: 32rpx;
		color: #888888;
	}
</style>
